<template>
	<view class="ProblemFeedback">

		<!-- 举报类型 -->
		<view class="report">
			<!-- <view class="feedback_name">请选择你想要举报的类型</view> -->
	<!-- 		<view class="feedback_type">
				<view @click="ListClick(index,item)" v-for="item,index in list"><text
						:class="active===index?'active':''">{{item.name}}</text></view>
			</view> -->
			<view class="feedback_name copy">
				<text>举报描述</text>
				<text>{{feedback.content.length}}/200</text>
			</view>

			<view class="uni-textarea">
				<textarea maxlength="200" style="color: #666;" v-model="feedback.content"
					:class="textareaStyle===0?'activeTextCopy':'activeText'" @focus="Taken" @blur="lose"
					placeholder="提供更多信息有助于举报被快速处理~" />
			</view>
		</view>


		<!-- 图片上传 -->
		<view class="Upload_module">
	<!-- 		<view class="feedback_name evidence copy">
				<text>图片证据</text>
				<text>最多三张</text>
			</view> -->
			<view class="layout">
		   <uni-file-picker v-model="imageList" :limit="6" file-mediatype="image" @select="uploadImage" />
				<!-- 图片展示 -->
		<!-- 		<view class="picture_list">
					<view v-for="item,index in chooseImags">
						<view @tap="handlePrevewImage(item)" class="cu-avatar view"
							:style="{'backgroundImage':'url('+item+')' }"></view>

						<text @tap="bandleRemoveImg(index)" class="cuIcon-close delete_img"></text>
					</view>
				</view> -->
	<!-- 			<view class="uploadImg" @click="uploadImg">
					<view class="image">
						<image src="https://api.myisre.cn/266fb204fc898feae46618edf.png" mode="widthFix"></image>
					</view>
				</view> -->
			</view>
		</view>


		<view class="btn_bottom">
			<button class="cu-btn bnt1" @click="submit">提交反馈</button>
		</view>
	</view>
</template>

<script>
	import config from "@/config";
	export default {
		name: "ProblemFeedback",
		data() {
			return {
				imageList:[],
				// 反馈类型列表
				feedback: {
					rela_name: "",
					phone: "",
					content: "",
				},
				list: [{
						name: "违法违规"
					},
					{
						name: "色情低俗"
					},
					{
						name: "诈骗信息"
					},
					{
						name: "时政不实信息"
					},
					{
						name: "引导站外交易"
					},
					{
						name: "售卖假货"
					},
					{
						name: "冒充他人"
					},
					{
						name: "谩骂攻击"
					},
					{
						name: "涉未成年人"
					},
					{
						name: "低差广告"
					},
					{
						name: "涉未成年人"
					},
					{
						name: "其他"
					},
				],
				active: 0,
				textareaStyle: 0,
				valueItem: "",
				value1: "",
				//图片列表
				chooseImags: '',
				uploadResults: [],
			}
		},
		methods: {
			submit(){
				if(this.feedback.content == ''){
					uni.showToast({
					  title: '请填写内容',
					  icon: 'none'
					})
					return
				}
				this.$http.getTousu({info:this.feedback.content,photos: this.chooseImags}).then((result)=>{
						uni.showToast({
						  title: '提交成功',
						  icon: 'none'
						})
						 setTimeout(()=>{
							  uni.navigateBack(-1);
						 },1000)
				}).catch(error=>{});
			},
// 获取上传状态
	  uploadImage(e) {
		  let uploadResults = []; // 用于存储所有上传结果的数组
	      const tempFilePath = e.tempFilePaths[0];
	      // uni.uploadFile({
	      //   url: 'ucenter/upload_imgae	',
	      //   filePath: tempFilePath,
	      //   name: 'file',
	      //   success: (res) => {
	      //     const result = JSON.parse(res.data);
	      //     if (result.code === 200) {
	      //       this.imageList = [{ url: result.data.url }];
	      //     }
	      //   }
	      // });
		  let users = this.$storage.getJson("users");
		  
		  uni.uploadFile({
		      url: config.uni_app_web_api_url + '' + '/ucenter/upload_imgae',
		      filePath: tempFilePath,
		      name: 'file',
		      header: { "Auth-Token" : users.token },
		      success: (uploadFileRes) => {
		  		let res = JSON.parse(uploadFileRes.data).data;
						 this.uploadResults.push(res);
						 this.chooseImags =this.uploadResults.join(',')
						 console.log( this.chooseImags,'resresres')
		      }
		  });
		  
		  
		  
	    },

			ListClick(i, val) {
				this.active = i;
				this.valueItem = val.name
			},
			lose() {
				this.textareaStyle = 0;
			},
			Taken() {
				this.textareaStyle = 1;
			},



			// 上传图片
			uploadImg() {
				if (this.chooseImags.length >= 3) return uni.showToast({
					title: '图片已达上限',
					icon: 'none',
					duration: 2000
				})
				uni.chooseImage({
					//同时选中的图片的数量
					count: 3,
					//图片的格式  原图  压缩
					sizeType: ['original', 'compressed'],
					//图片的来源  相册  照相机
					sourceType: ['album', 'camera'],
					success: (result) => {
						console.log(result)
						//图片数组进行拼接					
						this.chooseImags = [...this.chooseImags, ...result.tempFilePaths];
					},
				});
			},
			//反馈,图片放大预览
			handlePrevewImage(e) {
				//先构造要预览的图标数组
				const urls = this.chooseImags;
				//接收传递过来的图片url
				const current = e;
				wx.previewImage({
					current, // 当前显示图片的http链接
					urls // 需要预览的图片http链接数组列表
				})
			},

			//删除data里面图片的方法
			bandleRemoveImg(index) {
				console.log(index)
				//2.获取data中的图片数组
				const chooseImagsData = this.chooseImags;
				//3.根据索引删除元素
				chooseImagsData.splice(index, 1);
				//4.重新填充会chooseImags中
				this.chooseImags = chooseImagsData;
				console.log(this.chooseImags)
			},
		}
	}
</script>


<style lang="scss" scoped>
	.uni-textarea-placeholder {
		color: #ccc;
	}

	.report {
		padding: 0 32rpx;
	}

	.evidence {
		margin-bottom: 20rpx;
	}

	.ProblemFeedback {
		background: #fafbfb;
		height: 100%;

		.picture_list {
			display: flex;
			flex-wrap: wrap;

			view {
				width: 158rpx;
				margin-right: 14rpx;
				height: 158rpx;
				position: relative;

				image,
				.view {
					width: 158rpx;
					height: 158rpx;
					border-radius: 12rpx;
				}

				.delete_img {
					background-color: #4d5eff;
					color: #fff;
					position: absolute;
					right: 10rpx;
					z-index: 10;
					top: 10rpx;
					text-align: center;
					line-height: 36rpx;
					width: 32rpx;
					height: 32rpx;
					border-radius: 4rpx;
				}
			}
		}

		.btn_bottom {
			height: 160rpx;
			padding: 12rpx 32rpx;
			background-color: #fafbfb;
			margin-top: 100rpx;

			.bnt1 {
				width: 100%;
				color: #fff;
				background: #78C0F9;
				height: 88rpx;
				line-height: 88rpx;

			}
		}

		.Upload_module {
			margin: 0 34rpx;
			margin-top: 40rpx;

			.uploadImg {
				width: 160rpx;
				height: 160rpx;
				border: 2rpx solid #dfdfdf;
				border-radius: 12rpx;
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: center;


				.image {
					image {
						width: 70rpx;
						height: 70rpx;
					}

				}
			}

			.Tips {
				font-size: 24rpx;
				margin-top: 20rpx;
				color: #999999;
			}

			.layout {
				display: flex;
				align-items: center;
			}
		}

		.feedback_name {
			font-size: 30rpx;
			color: #333;
			padding: 36rpx 0 0 0;
		}

		.copy {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			&>text:nth-child(2) {
				color: #b0b0b0;
				font-size: 26rpx;
			}
		}

		.uni-textarea {
			display: flex;
			margin-top: 20rpx;
			justify-content: center;

			.uni-textarea-compute {
				height: 100%;
			}

			.activeText {
				border: 3rpx solid #78C0F9;
			}

			.activeTextCopy {
				border: 3rpx solid #eee;
			}

			textarea {
				padding: 24rpx;
				font-size: 28rpx;
				width: 710rpx !important;
				height: 200rpx !important;
				background: #fff;
				border-radius: 10rpx;
			}
		}

		.feedback_type {
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			.active {
				color: #fff;
				background: #4d5eff;
			}

			view {
				text-align: center;
				width: 50%;
				margin-top: 24rpx;

				text {
					background: #e6e7e7;
					color: #999;
					width: 314rpx;
					display: inline-block;
					padding: 14rpx 8rpx;
					border-radius: 10rpx;
					font-size: 24rpx;
				}
			}
		}
	}
</style>